/**
 * detail:
 * date:
 * */

import * as React from "react";
import Quill  from "quill";


export default class MainCenter extends React.Component<any, any>{

    componentDidMount(): void {
        let toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],

            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['clean']
        ];
        let editor = new Quill("#editor-main", {
            modules: {

                toolbar: toolbarOptions,
                history: {
                    delay: 2000,
                    maxStack: 500,
                    userOnly: true
                }
            },
            theme: 'snow'
        });
        console.log(editor);
    }

    render(){
        return (
            <div className={"main-center main-con"} >
                <div contentEditable="true" id="editor-main" style={{height:"calc(100% - 66px)",}}>
                </div>
            </div>
        )
    }
}
